<template>
	<el-card shadow="never" class="aui-card--fill">
		<div class="mod-contents__category}">
			<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
				<el-form-item>
					<el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button @click="getDataList()">{{ $t('query') }}</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
				</el-form-item>
				<el-form-item>
					<el-button  type="primary"
						@click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
				</el-form-item>
				<el-form-item>
					<el-button  type="danger" @click="deleteHandle()">
						{{ $t('deleteBatch') }}</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="dataListLoading" :data="dataList" border
				@selection-change="dataListSelectionChangeHandle" style="width: 100%;">
				<el-table-column type="selection" header-align="center" align="center" width="50">
					
				</el-table-column>
				<el-table-column prop="id" label="ID" header-align="center" align="center">
					
				</el-table-column>
				<el-table-column prop="name" label="类目名称" header-align="center" align="center">
					
				</el-table-column>
				<el-table-column  prpo="coverImage" label="类目封面" header-align="center" align="center">
					<template slot-scope="scope">
						<el-image
						      style="width: 40px; height: 40px"
						      :src="scope.row.coverImage"
						      fit='fill'></el-image>
					</template>
				</el-table-column>
				<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
					<template slot-scope="scope">
						<el-button  type="text" size="small"
							@click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
						<el-button  type="text" size="small"
							@click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
				layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
				@current-change="pageCurrentChangeHandle">
			</el-pagination>
			<!-- 弹窗, 新增 / 修改 -->
			<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
		</div>
	</el-card>
</template>

<script>
	import mixinViewModule from '@/mixins/view-module'
	import AddOrUpdate from './category-add-or-update'
	export default {
		mixins: [mixinViewModule],
		data() {
			return {
				mixinViewModuleOptions: {
					getDataListURL: '/contents/category/page',
					getDataListIsPage: true,
					exportURL: '/contents/category/export',
					deleteURL: '/contents/category',
					deleteIsBatch: true
				},
				dataForm: {
					id: ''
				}
			}
		},
		methods: {
			query() {
				this.dataListLoading = true
				let page=new Object();
				this.$http.post(
					this.mixinViewModuleOptions.getDataListURL, {
							order: this.order,
							orderField: this.orderField,
							page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
							limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
							...this.dataForm
					}
				).then(({
					data: res
				}) => {
					this.dataListLoading = false
					if (res.code !== 0) {
						this.dataList = []
						this.total = 0
						return this.$message.error(res.msg)
					}
					
					this.dataList = this.mixinViewModuleOptions.getDataListIsPage ? res.data.records : res.data
					this.total = this.mixinViewModuleOptions.getDataListIsPage ? parseInt(res.data.total) : 0
				}).catch(() => {
					this.dataListLoading = false
				})
			}
		},
		components: {
			AddOrUpdate
		}
	}
</script>
